<template>
  <h1>用户管理</h1>
  <el-button type="default"
             v-if="authority.umsUserAdd"
             @click="add">添加用户</el-button>

  <el-table :data="pageInfo.list"
            stripe
            style="width:100%"
            border
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}">
    <el-table-column prop="username"
                     label="用户名"></el-table-column>
    <el-table-column prop="nickname"
                     label="昵称"></el-table-column>
    <el-table-column prop="phone"
                     label="手机号码">
    </el-table-column>
    <el-table-column prop="email"
                     label="邮箱">
    </el-table-column>
    <el-table-column prop="sex"
                     label="性别">
      <template #default="{row}">
        <template v-if="row.sex == 1">
          男
        </template>
        <template v-else-if="row.sex == 0">
          女
        </template>
        <template v-else>
          未知
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="birth"
                     label="生日">
    </el-table-column>
    <el-table-column prop="city"
                     label="城市">
    </el-table-column>
    <el-table-column prop="job"
                     label="职业">
    </el-table-column>
    <el-table-column prop="sign"
                     label="个性签名"
                     :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column label="操作"
                     width="350px">
      <template #default="scope">
        <el-button size="small"
                   type="primary"
                   v-if="authority.umsUserUpdate"
                   @click="edit(scope)">编辑</el-button>
        <el-button size="small"
                   type="success"
                   @click="changePassword(scope)">修改密码</el-button>
        <el-button size="small"
                   type="warning"
                   v-if="authority.umsUserUpdate"
                   @click="reset(scope)">重置密码</el-button>
        <el-button size="small"
                   type="danger"
                   v-if="authority.umsUserDelete"
                   @click="del(scope)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination class="el-pagination"
                 layout="prev,pager,next,total,jumper,sizes"
                 :total="pageInfo.total"
                 v-model:current-page="pageInfo.pageNum"
                 v-model:page-size="pageInfo.pageSize"
                 :page-sizes="[3,5,10,20]"
                 background
                 @current-change="handleCurrentChange"
                 @size-change="handleSizeChange">
  </el-pagination>

  <el-dialog v-model="changePasswordDisableDialog"
             title="修改密码"
             center
             width="600px">
    <el-form :model="umsUser"
             :rules="rules"
             label-width="100px"
             ref="editUser">
      <el-form-item label="用户名：">
        <el-input type="text"
                  disabled="true"
                  v-model="umsUser.username"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="新密码：">
        <el-input type="password"
                  placeholder="请输入密码"
                  v-model="umsUser.password"></el-input>
      </el-form-item>
      <el-form-item prop="password1" label="确认密码：">
        <el-input type="password"
                  placeholder="请确认密码"
                  v-model="umsUser.password1"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelSave">取消</el-button>
      <el-button type="primary"
                 @click="saveData">确定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="disableDialog"
             title="编辑用户"
             center
             width="600px">
    <el-form :model="umsUser"
             :rules="rules"
             ref="editUmsUser"
             label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名"
                        prop="username">
            <el-input type="text"
                      placeholder="请输入用户名"
                      v-model="umsUser.username"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="昵称"
                        prop="nickname">
            <el-input type="text"
                      placeholder="请输入昵称"
                      v-model="umsUser.nickname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生日"
                        prop="birth">
            <el-date-picker
                placeholder="生日"
                v-model="umsUser.birth"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="性别"
                        prop="sex">
            <el-radio-group v-model="umsUser.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话号码"
                        prop="phone">
            <el-input type="text"
                      placeholder="请输入电话号码"
                      v-model="umsUser.phone"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱"
                        prop="email">
            <el-input type="text"
                      placeholder="请输入邮箱"
                      v-model="umsUser.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职业"
                        prop="job">
            <el-input type="text"
                      placeholder="请输入职业"
                      v-model="umsUser.job"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="城市"
                        prop="city">
            <el-input type="text"
                      placeholder="请输入城市"
                      v-model="umsUser.city"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="个性签名"
                    prop="sign">
        <el-input autosize
                  type="textarea"
                  placeholder="请添加个性签名"
                  v-model="umsUser.sign"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="cancelSave">取消</el-button>
      <el-button type="primary"
                 @click="saveData('editUmsUser')">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="addDisableDialog"
             title="添加用户"
             center
             width="700px">
    <el-form :model="umsUser"
             :rules="rules"
             ref="addUmsUser"
             label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名"
                        prop="username">
            <el-input type="text"
                      placeholder="请输入用户名"
                      v-model="umsUser.username"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="昵称"
                        prop="nickname">
            <el-input type="text"
                      placeholder="请输入昵称"
                      v-model="umsUser.nickname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="密码"
                        prop="password">
            <el-input type="password"
                      placeholder="请输入密码"
                      v-model="umsUser.password"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="确认密码"
                        prop="password1">
            <el-input type="password"
                      placeholder="请再次输入密码"
                      v-model="umsUser.password1"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生日"
                        prop="birth">
            <el-date-picker
                      placeholder="生日"
                      v-model="umsUser.birth"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="性别"
                        prop="sex">
            <el-radio-group v-model="umsUser.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话号码"
                        prop="phone">
            <el-input type="text"
                      placeholder="请输入电话号码"
                      v-model="umsUser.phone"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱"
                        prop="email">
            <el-input type="text"
                      placeholder="请输入邮箱"
                      v-model="umsUser.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职业"
                        prop="job">
            <el-input type="text"
                      placeholder="请输入职业"
                      v-model="umsUser.job"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="城市"
                        prop="city">
            <el-input type="text"
                      placeholder="请输入城市"
                      v-model="umsUser.city"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="个性签名"
                    prop="sign">
        <el-input autosize
                  type="textarea"
                  placeholder="请添加个性签名"
                  v-model="umsUser.sign"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="cancelSave">取消</el-button>
      <el-button type="primary"
                 @click="saveData('addUmsUser')">添加</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data(){
    let checkUmsUserNameValidate = (rule, value, callback) => {
      let url = this.$url.UmsUserControllerBaseUrl + "/checkUmsUserName";
      this.$http.post(url, this.umsUser).then(res => {
        if (!res.data.data) {
          callback(new Error("用户名已存在"));
        } else {
          callback();
        }
      });
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.umsUser.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return{
      authority: {
        umsUserAdd: true,
        umsUserUpdate: true,
        umsUserDelete: true
      },
      addDisableDialog: false,
      disableDialog: false,
      changePasswordDisableDialog: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      umsUser: {

      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '用户名长度需大于6小于20', trigger: ['blur', 'change'] },
          { validator: checkUmsUserNameValidate, trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: "请输入昵称", trigger: 'blur' },
          { min: 1, max: 8, message: "昵称长度为1-8字符" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: 'blur' },
          { min: 3, max: 18, message: "密码长度在3-18字符" },
        ],
        //确认密码
        password1: [
          { required: true, trigger: "blur", validator: validatePass2 },
          { min: 3, max: 18, message: "密码长度在3-18字符" },
        ],
        email: [{
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change']
        }],
        phone: [{
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur"
        }],
      }
    }
  },
  methods: {
    showData(){
      let params = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize
      }
      let url = this.$url.UmsUserControllerBaseUrl + "/getPaged";
      this.$http.get(url, { params: params }).then(res => {
        this.pageInfo = res.data.data;
      })
    },
    handleCurrentChange () {
      this.showData();
    },
    handleSizeChange () {
      this.showData();
    },
    changePassword (scope) {
      this.changePasswordDisableDialog = true;
      this.index = scope.$index;
      this.umsUser = {};
      this.umsUser.username = scope.row.username;
    },
    saveData (ref_name) {
      this.$refs[ref_name].validate(valid=>{
        if(valid){
          if (this.disableDialog) {
            this.$confirm("数据即将保存，是否确认？", "提示", {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.umsUser.password = null;
              this.umsUser.password1 = null;
              let url = this.$url.UmsUserControllerBaseUrl + "/check/update";
              this.$http.post(url, this.umsUser).then(res => {
                if (res.data.code === 2000) {
                  this.$message({
                    type: 'success',
                    message: '保存成功!'
                  });
                  this.showData();
                  this.disableDialog = false;
                  this.umsUser = {};
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.message
                  });
                }
              })
            })
          }
          if (this.addDisableDialog) {
            this.$confirm("数据即将保存并添加，是否确认？", "提示", {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = this.$url.UmsUserControllerBaseUrl + "/check/insert";
              this.$http.post(url, this.umsUser).then(res => {
                if (res.data.code === 2000) {
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  });
                  this.addDisableDialog = false;
                  this.umsUser = {};
                  this.pageInfo.pageNum = 1;
                  this.umsUserId = `${res.data.data}`
                  this.showData()
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.message
                  });
                }
              })
            })
          }
          if (this.changePasswordDisableDialog) {
            this.$confirm("密码即将修改并确认，是否确认？", "提示", {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = this.$url.UmsUserControllerBaseUrl + "/changePassword";
              this.$http.put(url, this.umsUser).then(res => {
                if (res.data.data) {
                  this.$message({
                    type: 'success',
                    message: '密码修改成功!'
                  });
                  this.changePasswordDisableDialog = false;
                  this.umsUser = {};
                  this.pageInfo.pageNum = 1;
                  this.showData();
                }
              })
            })
          }
        }
      });
    },
    cancelSave () {
      if (this.disableDialog) {
        this.mes = "已取消保存"
      }
      if (this.addDisableDialog) {
        this.mes = "已取消添加"
      }
      if (this.changePasswordDisableDialog) {
        this.mes = "已取消修改"
      }
      this.$confirm("数据尚未保存，是否取消？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.disableDialog) {
          this.disableDialog = false;
        }
        if (this.addDisableDialog) {
          this.addDisableDialog = false;
        }
        if (this.changePasswordDisableDialog) {
          this.changePasswordDisableDialog = false;
        }
        this.user = {}
        this.$message({
          type: 'info',
          message: this.mes
        });
      })
    },
    del (scope) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = this.$url.UmsUserControllerBaseUrl + `/check/deleteUmsUser?id=${scope.row.id}`;
        this.$http.delete(url).then(res => {
          if (res.data.code == 2000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
          this.showData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add(){
      this.umsUserId = ''
      this.addDisableDialog = true;
      this.umsUser = {};
    },
    edit (scope) {
      this.disableDialog = true;
      this.index = scope.$index;
      this.umsUser = {};
      this.umsUser = { ...scope.row };
      this.umsUser.password1 = this.umsUser.password;
      this.umsUserId = this.umsUser.id
    },
    reset(scope){
      this.index = scope.$index;
      this.umsUser = {};
      this.umsUser = { ...scope.row };
      this.umsUser.password = this.umsUser.username;
      this.$confirm('确定重置密码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = this.$url.UmsUserControllerBaseUrl + "/resetPassword";
        this.$http.post(url, this.umsUser).then(res => {
          if (res.data.code === 2000) {
            this.$message({
              type: 'success',
              message: '重置密码成功!'
            });
            this.showData();
            this.umsUser = {};
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        })
      })
    }
  },
  created() {
    this.showData();
  },
  name: "UmsUser"
}
</script>

<style scoped>

</style>